<template>
  <el-scrollbar class="container" ref="container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="160px">
      <el-form-item label="图件名称" prop="name">
        <el-input v-model="queryParams.name"></el-input>
      </el-form-item>
      <el-form-item label="图件类型" prop="type">
        <el-select v-model="queryParams.type">
          <el-option v-for="item in templateType" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>

    <el-row :gutter="10" class="mb8" style="float:left">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="uploadTemplate">模板上传</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList" stripe ref="table">
      <el-table-column label="图件名称" align="center" prop="name" />
      <el-table-column label="图件类型" align="center" prop="type">
        <template #default="{ row }">
          <span>{{ templateType.find(item => item.value === row.type).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传人" align="center" prop="uploadUser" />
      <el-table-column label="上传时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="viewItem(row)">查看</el-button>
          <el-button type="text" @click="downloadItem(row)">下载</el-button>
          <el-button type="text" @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
      v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination" />

    <TemplateForm v-model:open="templateDialog" v-model:templateId="templateId" @getList="getList" />
  </el-scrollbar>
</template>
<script setup>
import { templateType } from '@/views/quickMapping/common/const'
import TemplateForm from '@/views/quickMapping/dataManage/components/templateForm'
import { getAll, deleteIds } from '@/api/quickMapping/dataManage/mapTemplate'

const { proxy } = getCurrentInstance()
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0,
  name: '',
  type: ''
})
const loading = ref(false)
const dataList = ref([])
// 查询
const getList = () => {
  loading.value = true
  getAll(queryParams.value).then(res => {
    dataList.value = res.data.rows
    queryParams.value.total = res.data.total
    loading.value = false
  })
}
// 重置
const resetQuery = () => {
  queryParams.value.page = 1
  proxy.resetForm('queryRef')
  getList()
}

// 模板上传
const templateDialog = ref(false)
const uploadTemplate = () => {
  templateDialog.value = true
}

// 查看
const templateId = ref('')
const viewItem = (item) => {
  templateId.value = item.id
  templateDialog.value = true
}
// 下载
const downloadItem = (item) => {
  location.href = import.meta.env.VITE_APP_BASE_API + '/attachment/downLoadFile?attachId=' + item.ultId
}
// 删除
const deleteItem = (item) => {
  proxy.$modal.confirm(`是否确定删除${item.name}?`).then(() => {
    return deleteIds([item.id])
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  })
}

defineExpose({
  getList
})
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  min-height: 400px;
  overflow: auto;
}
</style>